(function ($) {
	$(window).load(function () {
		var
			oBox	 = $('#box'),
			iClientW = $(this).width(),
			iClientH = $(this).height();

		oBox.css('display', 'block');
		
		var
			iFirstW  = $('.panel:first').width(),
			iFirstImgW = $('img:first').width(),
			iCol	 = Math.floor(iClientW/ iFirstW),
			aPanel	 = $('.panel'),
			aColH	 = [],
			bBtn	 = true;

		// 设置box宽度
		oBox.css('width', iFirstW * iCol);

		// 设置图片位置
		setPanelPos(aPanel);

		// 滚动加载新的数据
		$(window).scroll(function () {
			var
				oLast = $('.panel:last'),
				oLastH = oLast.offset().top + oLast.height()/2,
				iScrollT = $(window).scrollTop();
			if(bBtn && iScrollT + iClientH > oLastH) {
				$.ajax({
					url: 'http://localhost/waterfall.php',
					type: 'GET',
					dataType: 'json',
					beforeSend: function () {
						bBtn = false;
					},
					success: function (data) {
						//var aNewPanel = $();
						for(var i = 0; i < data.length; i++) {
							var oImg = document.createElement('img');
							$(oImg).attr('src', data[i].url).width(iFirstImgW).height(iFirstImgW * data[i].height/data[i].width);
							var oA = document.createElement('a');
							var oNewPanel = document.createElement('div');
							$(oNewPanel).addClass('panel').css({
								left: (iClientW - iFirstW)/2,
								top: iClientH + iScrollT
							});
							$(oA).append(oImg);
							$(oNewPanel).append(oA);
							oBox.append(oNewPanel);

							var iMinK = getColMinKey();

							$(oNewPanel).animate({
								left: iMinK * iFirstW,
								top : aColH[iMinK],
							}, 1000);
							//更新高度
							aColH[iMinK] += $(oNewPanel).height();
						}
					},
					complete: function () {
						bBtn = true;
					}
				});
			}
		});

		$(window).resize(function () {
			iClientW = $(this).width();
			iClientH = $(this).height();
			iCol	 = Math.floor(iClientW/ iFirstW),
			aColH	 = [];

			// 设置box宽度
			oBox.css('width', iFirstW * iCol);
			// 重新计算panel的位置
			$('.panel').each(function (i) {
				if(i < iCol) {
					$(this).stop(true).animate({
						top: 0,
						left: i * iFirstW
					}, 500);
					aColH.push($(this).height());
				} else {
					var iMinK = getColMinKey();
					$(this).stop(true).animate({
						top: aColH[iMinK],
						left: iMinK * iFirstW
					}, 500);

					//更新高度
					aColH[iMinK] += $(this).height();
				}
			});
		});

		// 循环设置图片的left和top值
		function setPanelPos(aPos) {
			for(var i=0; i < aPos.length; i++) {
				var oPos = aPos.eq(i);
				if(i < iCol) {
					oPos.css({top: 0, left: i * iFirstW});
					aColH.push(oPos.height());
				} else {
					var iMinK = getColMinKey();
					oPos.css({top: aColH[iMinK], left: iMinK * iFirstW});

					//更新高度
					aColH[iMinK] += oPos.height();
				}
			}
		}
		// 计算列最小高度key
		function getColMinKey() {
			var
				iMinH = Math.min.apply(null, aColH);
				iMinK = 0;
			for(var j =0; j < aColH.length; j++) {
				if(aColH[j] === iMinH){
					iMinK = j;
					break;
				}
			}
			return iMinK;
		}
	});
})(jQuery);